<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				margin: 100px auto;
				position: relative;
			}
			ul li {
				list-style: none;
				width: 200px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
				transform-origin: 40px 0;
				
				
			}
			ul li:nth-child(1){
				background-color: red;
				transform: rotate(30deg);
				 
			}
			ul li:nth-child(2){
				background-color: yellow;
				transform: rotate(50deg);
				 
			}
			ul li:nth-child(3){
				background-color: skyblue;
				transform: rotate(70deg);
			 
			}
		</style>
	</head>
	<body>
		<!-- 
		默认情况下 元素旋转的以自己的中心点旋转的 我们
		可以通过形变中心点属性来更改他的参考点
		
			transform-origin: 40px 0;
			第一个参数 水平方向 第二个参数 垂直方向
			取值有三种方式:
			具体像素
			百分比
			特殊关键字
			transform-origin center  center
		 
		 
		 
		 -->
		<ul>
			<li></li>
			<li></li> 
			<li></li>
		</ul>
	</body>
</html>